<style type="text/css">
  .header-container {
    width: 100%;
    height: 80px;
    background-color: #eee;
  }
  .main-title {
    font-size: 50px;
    height: 80px;
    line-height: 80px;
  }

@@media (max-width: 480px) {
  .segmented-tab {
    display: none;
    visibility: hidden;
    float: right;
    text-align: center;
    margin: -40px 20px 0 0;
    font-size: 18px;
  }
  .single-tab {
    /*display: inline;*/
    visibility: hidden;
  }
  .single-tab a {
    visibility: hidden;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1024px) {
  .selector {
    float: right;
  }
  .segmented-tab {
    display: block;
    visibility: visible;
    float: right;
    text-align: center;;
    margin: -40px 20px 0 0;
    font-size: 18px;
  }
  .single-tab {
    display: inline;
  }
  .single-tab a {
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
  }
}




</style>


<div class="container-fluid header-container">

  <div class="text-primary main-title">
    <%= yield :main_title %>
  </div>
  <ul class="segmented-tab text-primary">
    <li class="single-tab"><%= link_to "首页" ,resume_home_url %></li>
    <li class="single-tab"><%= link_to "关于" ,resume_about_url %></li>
    <li class="single-tab"><%= link_to "联络" ,resume_contact_url %></li>
    <li class="single-tab"><%= link_to "博客" ,resume_blog_url %></li>
  </ul>
  <button class="selector">hello</button>
</div>
